Flex Panels Image Gallery

做一個畫廊
DEMO

1. 透過Flex將element水平、置中排列

   display: flex;
   justify-content: center;
   align-items: center;
   

2. 添加open-active，讓上下的文字上移及下移

   .panel>*:first-child {
    transform: translateY(-100%);
   }
   .panel.open-active>*:first-child {
    transform: translateY(0%);
   }
   .panel>*:last-child {
    transform: translateY(100%);
   }
   .panel.open-active>*:last-child {
    transform: translateY(0%);
   }
   

3. 為panel添加open，當滑入時放大五倍

   flex: 5;
   

4. 監聽所有panel，當click事件觸發，為指定panel添加open屬性

   function toggleOpen() {
    this.classList.toggle('open');
   }
   panels.forEach(panel => panel.addEventListener('click', toggleOpen));
   

5. 當transition結束時，要將上下的文字滑進來

   const panels = document.querySelectorAll('.panel');
   function toggleActive(e) {
    if (e.propertyName.includes('flex-grow')) {
        this.classList.toggle('open-active');
    }
   }
   panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
   

知識點

• translateY 可以垂直移動element
• cubic-bezier 調整transition動畫效果
• classList 為每個DOM element 都有的物件，可以用來控制CSS class，
  • classList.add 添加
  • classList.remove 移除
  • classList.contains 檢查是否包含
  • classList.toggle 檢查是否有添加的class，沒有的話則添加，反之則移除
  • classList.length class數量
  • classList.item 回傳對應class

補充資料
translateY - MDN
cubic-bezier
D25 - 走！去瀏覽器吃餅乾 yummy yummy